<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警通知单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <div class="homePageCards" id="homePageCards">
          <div class="grollDiv" v-if="false">
            <div class="">
              <label class="checklist iCheck" v-for="(item, index) in resourceTypes" :key="index">
                <input class="checkbox" type="checkbox" v-model="item.value" @change="check(item)" />
                <span class="fontSize18 fontWeight">{{ item.name }}</span>
              </label>
            </div>
          </div>
          <div class="full-box" v-if="false">
            <img src="../../../assets/img/full.png" alt="">
            <span @click="fullscreen">全屏</span>
          </div>
          <div class="full" v-if="false">
            <div class="full-boxs">
              <img src="../../../assets/map/red.svg" alt="">
              <span>红色预警</span>
            </div>
            <div class="full-boxs">
              <img src="../../../assets/map/orange.svg" alt="">
              <span>橙色预警</span>
            </div>
            <div class="full-boxs">
              <img src="../../../assets/map/yellow.svg" alt="">
              <span>黄色预警</span>
            </div>
            <div class="full-boxs">
              <img src="../../../assets/map/blue.svg" alt="">
              <span>蓝色预警</span>
            </div>
          </div>
          <div id="map" style="width: 100%; height: 100%">
            <MapContent :mapZoom="6" mapType="yjtzd"></MapContent>
          </div>
        </div>
      </div>
      <div class="Emergency-tb">
        <div class="Emergency-tb-bd">
          <el-form :inline="true" :model="formInline" size="small" label-width="80px">
            <div class="flexBetweens">
              <el-form-item label="发布时间:" label-width="100px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="至" label-width="30px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="query">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="Emergency-tb-bt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">省公司预警通知单</div>
            <!-- <div class="Emergency-tb-bt-center">
              <el-select v-model="value" placeholder="请选择" size="mini">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div> -->
            <div class="Emergency-tb-bt-bottom" @click="goList(1)">更多<i class="el-icon-d-arrow-right" color="#fff"></i>
            </div>
          </div>
          <div class="RightLine-t">
            <div v-show="shows" id="RightPie" style="width:40%;height:100%"></div>
            <div v-show="shows" class="legend_pie">

              <div style="margin-left:5px;">
                <span class="pie_bottom" style="background: #fa585a;margin-right:5px;"></span>
                <span>红色</span>
              </div>
              <div style="margin-left:5px;">
                <span class="pie_bottom" style="background: #F59066;margin-right:5px;"></span>
                <span>橙色</span>
              </div>
              <div style="margin-left:5px;">
                <span class="pie_bottom" style="background: #FDDD67;margin-right:5px;"></span>
                <span>黄色</span>
              </div>
              <div style="margin-left:5px;">
                <span class="pie_bottom" style="background: #148AF3;margin-right:5px;"></span>
                <span>蓝色</span>
              </div>

            </div>
            <!-- <div id="LeftLine" style="width:60%;height:100%"></div> -->
            <div id="Car" :style="{ width: shows ? '60%' : '100%', height: '100%' }">
              <BarCharts :option="option2" chartId="zwtzsd52" barChartsId="zwtzsd62" v-if="showBarCharts2">
              </BarCharts>
            </div>
          </div>
        </div>
        <div class="Emergency-tb-zzt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">地市级单位预警通知单</div>
            <div class="Emergency-tb-bt-bottom" @click="goList(1)">更多<i class="el-icon-d-arrow-right" color="#fff"></i>
            </div>
          </div>
          <div id="Car" style="width:100%;height:90%">
            <BarCharts :option="option3" chartId="zwtzsd51" barChartsId="zwtzsd61" v-if="showBarCharts1">
            </BarCharts>
          </div>
          <!-- <div id="zzt" style="width:100%;height:90%"></div> -->
          <!-- <el-empty v-show="isShow===false" :image-size="100"></el-empty> -->
        </div>
      </div>
      <div class="Emergency-tb-zzts">
        <div class="Emergency-tb-bt-titel">
          <div class="Emergency-tb-bt-top">预警通知单</div>
          <div class="Emergency-tb-bt-bottom" @click="goList">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
        </div>
        <!-- 列表表格 -->
        <!-- <LsdTable slot="gjxm" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" /> -->
        <el-table :row-style="{ background: '#18283a' }" max-height="185px" :header-cell-style="{
          background: 'rgba(24, 73, 183)',
          color: '#fff',
          border: 'rgba(31,70,146) 0.5px solid',
          fontSize: '16px',
          'text-align': 'center'
        }" stripe ref="multipleTable" :data="table.tableData" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column label="序号" type="index" align="center" width="60">
          </el-table-column>
          <el-table-column prop="warningNoticeName" label="预警通知单" align="left" min-width="220px"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="dangerName" align="center" label="险情类别" min-width="50px" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="warningLvName" align="center" label="预警级别" min-width="50px">
          </el-table-column>
          <el-table-column prop="effectRange" label="影响范围" align="left" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="effectEndTime" label="影响时间" align="left" min-width="93px" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.effectStartTime }}至{{ scope.row.effectEndTime }}
            </template>
          </el-table-column>
          <el-table-column prop="contact" label="联系人" align="left" min-width="150px" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="approvalDept" label="发布单位" align="left" min-width="90px">
          </el-table-column>
          <el-table-column prop="approvalTime" label="发布时间" align="center" min-width="90px">
          </el-table-column>
          <el-table-column prop="noticeState" align="center" label="状态" min-width="50px">
            <template slot-scope="scope">
              <span v-if="scope.row.noticeState === '0'">编辑中</span>
              <span v-else-if="scope.row.noticeState === '1'">待审批</span>
              <span v-else-if="scope.row.noticeState === '2'">驳回</span>
              <span v-else-if="scope.row.noticeState === '3'">已发布</span>
              <span v-else-if="scope.row.noticeState === '4'">解除</span>
              <span v-else-if="scope.row.noticeState === '5'">已处理</span>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
</template>
<script>
import { listPage, getStatistics } from "@/api/EarlyWarningManagement/yjtzd";
import MapContent from "../EWInformation/components/mapContent.vue";
import "../../../assets/style/Emergency.less";
import BarCharts from "../EWInformation/components/BarCharts.vue";
export default {
  name: "Emergency",
  components: { MapContent, BarCharts },
  data() {
    return {
      showBarCharts1: false,
      showBarCharts2: false,
      formInline: {
        startTime: "",
        endTime: ""
      },
      isShow: false,
      show: true,
      shows: true,
      map: null,
      geo: null,
      geocodingTask: null,
      resourceTypes: [
        {
          name: "省公司",
          value: true,
          number: 1
        },
        {
          name: "地市级",
          value: false,
          number: 2
        },
        {
          name: "县公司",
          value: false,
          number: 3
        }
      ],
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: true,
        loading: false,
        tableData: [],
        columns: [
          {
            prop: "warningNoticeName",
            label: "预警通知单",
            align: "left",
            "min-width": "230px"
          },
          {
            prop: "dangerName",
            label: "险情类别",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "warningLvName",
            label: "预警级别",
            align: "center",
            "min-width": "60px"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "center"
          },
          {
            prop: "effectEndTime",
            label: "影响时间",
            align: "left",
            "min-width": "95px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.effectStartTime}至{row.effectEndTime}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "contact",
            label: "联系人",
            align: "left"
            // "show-overflow-tooltip": "true"
          },
          {
            prop: "approvalDept",
            label: "发布单位",
            align: "left",
            "min-width": "110px"
          },
          {
            prop: "approvalTime",
            label: "发布时间",
            align: "center",
            "min-width": "95px"
          },
          {
            prop: "noticeState",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑中";
              } else if (cellValue === "1") {
                return "待审批";
              } else if (cellValue === "2") {
                return "驳回";
              } else if (cellValue === "3") {
                return "已发布";
              } else if (cellValue === "4") {
                return "解除";
              } else if (cellValue === "5") {
                return "转响应";
              }
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "185px",
          height: "185px",
          border: true,
          fit: true,
          stripe: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px",
            "color": "#fff",
            "border": "rgba(31,70,146) 1px solid"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "rgba(31,70,146)",
            "font-size": "16px",
            "border": "rgba(31,70,146) 1px solid",
            "color": "#fff"
          }
        }
      },
      options: [{
        value: "1",
        label: "国网湖北省电力有限公司"
      }],
      value: "1",
      typeName: "",
      tableDataList: [],
      pie: null, // 饼图
      shengji_bar: null,
      city_bar: null,
      mapData: [], // 地图数据
      number: 1,
      data: [
        ["", 0],
        ["", 0],
        ["", 0],
        ["", 0]
      ],
      pie_total: null,
      city_xAxis_data: [],
      city_four_data: [],
      city_three_data: [],
      city_two_data: [],
      city_one_data: [],
      xAxis_data: [],
      four_data: [],
      three_data: [],
      two_data: [],
      one_data: [],
      columnar: [],
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        bdHeight: "10%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: -40,
          ch3: 100,
          ch4: 30
        },
        grid: {
          left: 50, // 左边距离
          right: 15, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["红色", "橙色", "黄色", "蓝色"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option2: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        bdHeight: "10%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 100,
          ch4: 30
        },
        grid: {
          left: 60, // 左边距离
          right: 15, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["红色", "橙色", "黄色", "蓝色"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      }
    };
  },
  computed: {
    startPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.startTime && time.getTime() < new Date(this.formInline.startTime).getTime();
        }
      };
    },
    endPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.endTime && time.getTime() > new Date(this.formInline.endTime).getTime();
        }
      };
    },
    typeNames() {
      return this.resourceTypes.filter(i => i.value === true);
    }
  },
  created() {
    // 当前日期
    const d = new Date();
    // 获取当前日期的前三个月的月份
    const pastMonth = d.getMonth() - 3;
    // 修改月份，如果前三个月对应没有该日期，则向后延顺
    d.setMonth(pastMonth);
    this.formInline.startTime = this.formatDate(d);
    this.formInline.endTime = this.formatDate(new Date());
  },
  mounted() {
    // this.chart1 = this.$echarts.init(document.getElementById("zzt"));
    // this.chart2 = this.$echarts.init(document.getElementById("LeftLine"));
    this.bntHandel(this.formInline);
    this.initCharts();// 饼图
    if (this.columnar.length !== 0) {
      // this.Histogram();// 柱状图
    }
    // this.Histograms();// 柱状图
    this.list();

  },
  methods: {
    formatDate(val) {
      const date = new Date(val);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    async mapHanble() {
      // const res = await getNoticeByLevel({ level: this.number, endTime: this.formInline.endTime, startTime: this.formInline.startTime });
      // this.mapData = res;
    },
    fullscreen() { // 进入全屏
      var docElm = document.getElementById("homePageCards"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) { // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) { // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) { // 兼容IE11
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    check(val) {
      this.resourceTypes.forEach(element => {
        if (element.name !== val.name) {
          element.value = false;
        }
      });
      this.number = val.number;
      this.initMap();
      const param = this.typeNames;
      this.$emit("typeNames", param);
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: 1,
        pageSize: 4,
        noticeState: 3,
        roleCode: JSON.parse(sessionStorage.getItem("role")).roleCode
      };
      const res = await listPage(parmas);
      // res.data.forEach((item) => {
      //   item.approvalDept = (item.approvalDept).includes("司") ? item.approvalDept.split("司")[0] + "司" : item.approvalDept;
      // });
      this.$set(this.table, "tableData", res.data);
    },
    // 首页查询按钮
    query() {
      this.showBarCharts1 = false;
      this.showBarCharts2 = false;
      this.bntHandel(this.formInline);

    },
    async bntHandel(params) {
      // const params = {
      //   startTime: this.formInline.startTime,
      //   endTime: `${this.formInline.endTime}`,
      // };
      await getStatistics(params).then(res => {
        const data = [
          { value: 0, name: "红色", order: 1 },
          { value: 0, name: "橙色", order: 2 },
          { value: 0, name: "黄色", order: 3 },
          { value: 0, name: "蓝色", order: 4 }
        ];
        let pie_total = 0;
        if (res.columnar.length && res.pie.length) {
          this.shows = true;
          data.forEach(item => {
            res.pie.forEach(pieitem => {
              if (item.order == pieitem.order) {
                item.value = pieitem.wlnCount;
                item.name = pieitem.wln;
              }
            });
          });

          pie_total = res.pie.reduce((total, currentValue, currentIndex, arr) => {
            return total + currentValue.wlnCount;
          }, 0);
          this.pie_total = pie_total;
          this.data = data;
          this.initCharts();
          this.xAxisData = res.columnar.map(item => item.dangerName);
          this.option2.xAxis[0].data = this.xAxisData;
          const datas1 = res.columnar.map((item) => {
            const arr = [item.redCount ? item.redCount : 0, item.orangeCount ? item.orangeCount : 0, item.yellowCount ? item.yellowCount : 0, item.buleCount ? item.buleCount : 0];
            return arr;
          });
          this.option2.series = datas1;
          this.showBarCharts2 = true;

        } else {
          console.log("iiiiiiiiiiiiiii");
          this.shows = false;
          console.log(this.shows, "this.showsthis.shows");
          this.xAxisData = res.columnar.map(item => item.dangerName);
          this.option2.xAxis[0].data = this.xAxisData;
          const datas1 = res.columnar.map((item) => {
            const arr = [item.redCount ? item.redCount : 0, item.orangeCount ? item.orangeCount : 0, item.yellowCount ? item.yellowCount : 0, item.buleCount ? item.buleCount : 0];
            return arr;
          });
          this.option2.series = datas1;
          this.showBarCharts2 = true;
        }
        this.xAxisDatas = res.cityColumnar.map(item => item.cityName);
        this.option3.xAxis[0].data = this.xAxisDatas;
        const datas = res.cityColumnar.map((item) => {
          const arr = [item.redCount ? Number(item.redCount) : 0, item.orangeCount ? Number(item.orangeCount) : 0, item.yellowCount ? Number(item.yellowCount) : 0, item.buleCount ? Number(item.buleCount) : 0];
          return arr;
        });
        this.option3.series = datas;
        this.showBarCharts1 = true;



        // this.columnar = res.cityColumnar;
        // // if (this.columnar.length !== 0) {
        // //   this.isShow = true;
        // let city_xAxis_data = [];
        // let city_one_data = [];
        // let city_two_data = [];
        // let city_three_data = [];
        // let city_four_data = [];
        // if (res.cityColumnar.length) {
        //   city_xAxis_data = res.cityColumnar.map(item => item.cityName);
        //   // 一级
        //   const one_arr = res.cityColumnar.map(item => {
        //     return Number(item.redCount);

        //   });
        //   // console.log(one_arr)
        //   city_one_data = one_arr;
        //   // 二级
        //   const two_arr = res.cityColumnar.map(item => {
        //     return Number(item.orangeCount);
        //   });
        //   city_two_data = two_arr;
        //   // 三级
        //   const three_arr = res.cityColumnar.map(item => {
        //     return Number(item.yellowCount);
        //   });
        //   city_three_data = three_arr;
        //   // 四级
        //   const four_arr = res.cityColumnar.map(item => {
        //     return Number(item.buleCount);
        //   });
        //   city_four_data = four_arr;
        // }
        // this.city_xAxis_data = city_xAxis_data;
        // this.city_four_data = city_four_data;
        // this.city_three_data = city_three_data;
        // this.city_two_data = city_two_data;
        // this.city_one_data = city_one_data;
        // // this.Histogram();
        // // }
      });
    },
    initCharts() {
      this.$Highcharts.chart("RightPie", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          },
          backgroundColor: "transparent",
          marginTop: -50
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          },
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff",
            fontSize: "14px"
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size:25px;font-weight:bold;color:#fff">${this.pie_total}</span><br/><span style="font-size:14px;color:#fff">总数</span>`,
          x: 0,
          y: 70
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 55,
            dataLabels: {
              enabled: false,
              // format: '{point.name}<br/>{point.y}',
              distance: 0,
              formatter: function () {
                if (this.percentage > 0) { return `<span style="font-size:14px;font-weight:bold;color:${this.point.color}">${this.point.name}</span><br/><span style="font-size:14px;color:${this.point.color}">${this.point.y}</span>`; }
              },
              style: {
                color: "#Fff",
                fontSize: "14px"
              }
            }, states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        colors: [
          "#FA585A",
          "#F5885C",
          "#FEDF6E",
          "#258FE9"
        ],
        series: [{
          size: "70%",
          innerSize: "60%",
          type: "pie",
          data: [
            [this.data[0].name, this.data[0].value === 0 ? null : this.data[0].value],
            [this.data[1].name, this.data[1].value === 0 ? null : this.data[1].value],
            [this.data[2].name, this.data[2].value === 0 ? null : this.data[2].value],
            [this.data[3].name, this.data[3].value === 0 ? null : this.data[3].value]
          ]
        }]
      });
    },
    Histograms() {
      const data1 = this.four_data;
      const data2 = this.three_data;
      const data3 = this.two_data;
      const data4 = this.one_data;
      const datas = [data1, data2, data3, data4];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart2.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              const finishedCount1 = data3[params.dataIndex];
              const unFinishedCount1 = data4[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #278dec;border-radius: 50%;margin-right: 10px'></div>蓝色: ${finishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ffb400;border-radius: 50%;margin-right: 10px'></div>黄色: ${unFinishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fb6421;border-radius: 50%;margin-right: 10px'></div>橙色: ${finishedCount1}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ff0048;border-radius: 50%;margin-right: 10px'></div>红色: ${unFinishedCount1}</div>`;
            }
          },
          grid: {
            top: "22%",
            right: "5%",
            bottom: "27%",
            left: "5%"
          },
          xAxis: {
            data: this.xAxis_data,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            }
          },
          yAxis: [
            {
              splitNumber: 10,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              min: 0,
              // max: 7,
              interval: 2,
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "蓝色",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#278dec"
                    },
                    {
                      offset: 1,
                      color: "#5cbcff"
                    }
                  ]
                }
              }
            },
            {
              name: "黄色",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              name: "橙色",
              data: datas[2],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fb6421 "
                    },
                    {
                      offset: 1,
                      color: "#ffa882"
                    }
                  ]
                }
              }
            },
            {
              name: "红色",
              data: datas[3],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ff0048"
                    },
                    {
                      offset: 1,
                      color: "#F1A2A2"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#5cbcff"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#278dec"
                      },
                      {
                        offset: 1,
                        color: "#5cbcff"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb400"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data3,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#fb6421 "
                      },
                      {
                        offset: 1,
                        color: "#ffa882"
                      }
                    ]
                  }
                }
              }
            },
            {
              // data: [4, 8, 12, 4, 8, 12, 4, 8, 12, 4, 8, 12, 4, 8, 12],
              data: obj.data4,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ff0048"
                      },
                      {
                        offset: 1,
                        color: "#F1A2A2"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
    },
    Histogram() {
      const data1 = this.city_four_data;
      const data2 = this.city_three_data;
      const data3 = this.city_two_data;
      const data4 = this.city_one_data;
      const datas = [data1, data2, data3, data4];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              const finishedCount1 = data3[params.dataIndex];
              const unFinishedCount1 = data4[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #278dec;border-radius: 50%;margin-right: 10px'></div>蓝色: ${finishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ffb400;border-radius: 50%;margin-right: 10px'></div>黄色: ${unFinishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fb6421;border-radius: 50%;margin-right: 10px'></div>橙色: ${finishedCount1}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ff0048;border-radius: 50%;margin-right: 10px'></div>红色: ${unFinishedCount1}</div>`;
            }
          },
          grid: {
            top: "22%",
            right: "5%",
            bottom: "27%",
            left: "5%"
          },
          xAxis: {
            data: this.city_xAxis_data,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            }
          },
          yAxis: [
            {
              splitNumber: 10,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              min: 0,
              // max: 7,
              // interval: 20,
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "蓝色",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#278dec"
                    },
                    {
                      offset: 1,
                      color: "#5cbcff"
                    }
                  ]
                }
              }
            },
            {
              name: "黄色",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              name: "橙色",
              data: datas[2],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fb6421 "
                    },
                    {
                      offset: 1,
                      color: "#ffa882"
                    }
                  ]
                }
              }
            },
            {
              name: "红色",
              data: datas[3],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ff0048"
                    },
                    {
                      offset: 1,
                      color: "#F1A2A2"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#5cbcff"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#278dec"
                      },
                      {
                        offset: 1,
                        color: "#5cbcff"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb400"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data3,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#fb6421 "
                      },
                      {
                        offset: 1,
                        color: "#ffa882"
                      }
                    ]
                  }
                }
              }
            },
            {
              // data: [4, 8, 12, 4, 8, 12, 4, 8, 12, 4, 8, 12, 4, 8, 12],
              data: obj.data4,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ff0048"
                      },
                      {
                        offset: 1,
                        color: "#F1A2A2"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
    },
    goList(item) {
      this.$router.push({
        name: "NoticeList",
        query: {
          noticeState: 3
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.Emergency {
  height: 95%;
  // padding: 0px 20px;
  margin: 0;

  // /deep/.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  //   padding: 4px 0 !important;
  // }
  /deep/ .el-table__body {
    color: #fff !important;
  }

  /deep/ .el-table td {
    border: 1px solid rgba(31, 70, 146) !important;
    // padding: 6px 0 !important;
  }

  /deep/ .el-table th {
    border: 1px solid rgba(31, 70, 146) !important;
  }

  :deep(div::-webkit-scrollbar) {
    width: 5px;
  }

  :deep(.gutter) {
    background-color: transparent !important;
    // border: none !important;
  }

  .Emergency-tb-zzts /deep/ .el-table tr {
    font-size: 16px !important;
    background-color: transparent !important;
    border: 1px solid rgba(31, 70, 146) !important;
  }

  :deep(.el-table) {
    font-size: 16px !important;

    &::before {
      height: 0px;
    }
  }

  .cell {
    color: rgb(255, 255, 255);
  }

  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
    height: 0px;
  }

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  :deep(.el-table__body tr:hover > td) {
    background: none !important;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    .background-row {
      background: rgba(255, 255, 255, 0.2);
    }

    background-color: transparent;

    .el-table__body-wrapper.is-scrolling-left {
      height: 482px;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba(255, 255, 255, 0.2);
    }

    .el-table td {
      border-bottom: none;
      color: #fff;
      font-size: 16px;
    }

    .el-table th {
      border-bottom: none;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: transparent;
    }
  }

  :deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  :deep(.el-table.bottomTable) {
    font-size: 12px;
    margin-top: 5px;

    div.cell {
      padding-left: 0;
      padding-right: 0;
      font-size: 12px;
    }

    th.el-table__cell {
      background-color: #265cff;
    }
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
    background-color: rgba(255, 255, 255, 0.2);
    /*隔行变色*/
  }

  .half {
    width: 50%;
    display: flex;

    :deep(.el-form-item__content) {
      flex: 1 !important;
    }

    :deep(.el-select) {
      width: 100% !important;
    }

    :deep(.el-input) {
      width: 100% !important;
    }

    :deep(.el-date-editor) {
      width: 100% !important;
    }
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-dt {
      width: 55%;
      height: 70%;
      border: rgba(10, 73, 187) 1px solid;

      .homePageCards {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 2px;
        border-radius: 5px;

        #map {
          border-radius: 5px;
        }
      }

      .full {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 9;
        background-color: rgba(255, 255, 255, 0.654901960784314);

        .full-boxs {
          display: flex;
          align-items: center;
          font-size: 17px;
          font-weight: 600;
          z-index: 9;
          background-color: rgba(255, 255, 255, 0.654901960784314);
          cursor: pointer;
          padding: 3px 10px;
          border-radius: 5px;

          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }

      .grollDiv {
        // width: 240px;
        // height: 10%;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        top: 10px;
        left: 10px;
        z-index: 9;
        color: #fff;
        font-size: 12px;
        // line-height: 25px;
        padding: 10px;
        padding-top: 0;
        border-radius: 5px;

        .flex-warp {
          flex-wrap: wrap;
        }

        .checklist {
          display: flex;
          align-items: center;
          // width: 120px;
          margin-top: 15px;
          box-sizing: border-box;
          text-align: center;

          input {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            cursor: pointer;
          }

          span {
            color: #000;
          }
        }
      }

      input[type="checkbox"] {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
      }

      input[type="checkbox"]::after {
        position: absolute;
        top: 0;
        color: #000;
        width: 16px;
        height: 16px;
        display: inline-block;
        visibility: visible;
        padding-left: 0px;
        text-align: center;
        content: " ";
        border-radius: 3px;
      }

      input[type="checkbox"]:checked::after {
        content: "✓";
        color: #fff;
        font-size: 10px;
        line-height: 15px;
        background-color: #0649d7;
      }

      .full-box {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        z-index: 9;
        background-color: #fff;
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 5px;

        img {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
    }

    .Emergency-tb {
      width: 44%;
      height: 70%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Emergency-tb-bd {
        width: 100%;
        height: 8%;
        border: rgba(10, 73, 187) 1px solid;

        .flexBetweens {
          align-items: center;
        }

        :deep(.el-form) {
          margin-top: 5px;
        }

        :deep(.el-button--primary) {
          border: none;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-form-item__content) {
          width: 60%;
        }

        :deep(.el-input__inner) {
          background-color: transparent !important;
          border: rgba(10, 73, 187) 1px solid;
          color: #fff;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 45%;
        border: rgba(10, 73, 187) 1px solid;

        .Emergency-tb-bt-titel {
          height: 14%;
          background-color: rgba(24, 73, 183);

          .Emergency-tb-bt-top {
            font-size: 15px;
          }

          .Emergency-tb-bt-bottom {
            color: #fff;
          }
        }

        .RightLine-t {
          width: 100%;
          height: 90%;
          display: flex;
          position: relative;

          .legend_pie {
            position: absolute;
            left: 8%;
            bottom: 11%;
            display: flex;
            font-size: 14px;

            // align-items: center;
            // transform: translateX(-50%);
            div {
              color: #fff;
            }
          }

          .pie_bottom {
            display: inline-block;
            text-align: center;
            height: 13px;
            width: 18px;
            line-height: 10px;
            border-radius: 3px;
          }
        }

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: rgba(10, 73, 187) 1px solid;
          border-radius: 2px;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }

      .Emergency-tb-zzt {
        width: 100%;
        height: 44%;
        border: rgba(10, 73, 187) 1px solid;

        .Emergency-tb-bt-titel {
          height: 13%;
          background-color: rgba(24, 73, 183);

          .Emergency-tb-bt-top {
            font-size: 15px;
          }

          .Emergency-tb-bt-bottom {
            color: #fff;
          }
        }
      }
    }

    .Emergency-tb-zzts {
      width: 100%;
      height: 28%;
      // background-color: #eeeeee;
      border: rgba(10, 73, 187) 1px solid;

      :deep(.el-table--border th.el-table__cell, ) {
        // padding: 0 !important;
      }

      :deep(.el-table td.el-table__cell, ) {
        // padding: 0 !important;
      }

      :deep(.el-table__row) {
        height: 20px !important;
      }

      .Emergency-tb-bt-titel {
        background: none;
        height: 12% !important;

        .Emergency-tb-bt-top {
          font-size: 17px;
        }

        .Emergency-tb-bt-bottom {
          color: #fff;
        }
      }
    }
  }
}

:deep(.epgis-popup-content) {
  width: 370px !important;
  height: 130px !important;
  border-radius: 2px !important;
  background-color: #7e8aa6 !important;
  opacity: 0.8;
  // background-image: url("../../../../assets/map/u5.png");
}

:deep(.epgis-popup-anchor-top-right .epgis-popup-tip) {
  border-bottom-color: #7e8aa6 !important;
  opacity: 0.8;
}
</style>
